<template>
	<view class="balance-page">
		<!-- 余额显示区域 -->
		<view class="balance-header">
			<view class="balance-bg">
				<view class="balance-amount">{{ userInfo.usableBalance || 0 }}</view>
				<view class="balance-actions">
					<view class="action-item" @click="goToBalanceDetail">
						<text class="action-text">储值明细</text>
					</view>
					<view class="action-item" @click="goToBalanceRule">
						<text class="action-text">储值规则</text>
					</view>
				</view>
				<!-- 装饰性图片 -->
				<image class="balance-decoration"
					src="https://www.ruilongan.com/profile/upload/2025/08/20/积分log_20250820084823A004.png"
					mode="aspectFit"></image>
			</view>
		</view>

		<!-- 充值金额选择 -->
		<view class="recharge-section" v-if="rules.length > 0 && rules[0].recharge != '0'">
			<view class="amount-grid">
				<view class="amount-item" :class="{ active: selectedAmount === item.amount }"
					v-for="(item, index) in amountOptions" :key="index" @click="selectAmount(item)">
					<view class="amount-value">¥{{ item.amount }}</view>
					<view class="amount-bonus" v-if="item.bonus">{{ item.bonus }}</view>
				</view>
			</view>

			<!-- 自定义金额 -->
			<view class="custom-amount">
				<text class="custom-label">自定义金额：</text>
				<input class="custom-input" type="number" placeholder="请输入储值金额" v-model="customAmount"
					@input="selectCustomAmount" />
			</view>

			<!-- 立即储值按钮 -->
			<button class="recharge-btn" @click="handleRecharge">立即储值</button>
		</view>

		<!-- 精选推荐 -->
		<!-- <view class="recommend-section">
			<view class="recommend-title">精选推荐</view>
			<view class="recommend-list">
				<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index">
					<image class="recommend-image" :src="item.image" mode="aspectFill"></image>
					<view class="recommend-info">
						<view class="recommend-name">{{ item.name }}</view>
						<view class="recommend-tags">
							<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
						</view>
						<view class="recommend-price">
							<text class="current-price">¥ {{ item.price }}</text>
							<text class="sold-count">已售{{ item.soldCount }}+</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		getInfo
	} from '@/api/vipUser.js'
	import {
		listRules
	} from '@/api/storedRules.js'
	export default {
		computed: mapGetters(['name', 'userId']),
		data() {
			return {
				currentBalance: '',
				selectedAmount: null,
				customAmount: '',
				userInfo: {},
				rules: [],
				amountOptions: [{
						amount: 100,
						bonus: ''
					},
					{
						amount: 300,
						bonus: '送20积分'
					},
					{
						amount: 500,
						bonus: '送20积分'
					},
					{
						amount: 1000,
						bonus: '送30积分'
					},
					{
						amount: 2000,
						bonus: '送30积分'
					},
					{
						amount: 3000,
						bonus: '送30积分'
					},
					{
						amount: 5000,
						bonus: '送30积分'
					},
					{
						amount: 8000,
						bonus: '送30积分'
					}
				],
				recommendItems: [{
						name: '来套这款时尚简约大气女装...',
						tags: ['女装', '夏装', '简约'],
						price: '119.99',
						soldCount: '2000',
						image: 'https://via.placeholder.com/160x200/87CEEB/FFFFFF?text=Summer+Fashion'
					},
					{
						name: '修心连衣裙',
						tags: ['连衣裙', '女装', '修身显瘦'],
						price: '233.89',
						soldCount: '2000',
						image: 'https://via.placeholder.com/160x200/000000/FFFFFF?text=Black+Dress'
					}
				]
			}
		},
		onShow() {
			// TODO 后边放缓存，所有用户头像名称等（改之后更新，随后直接取）
			this.getInfo()
			this.getRules()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectAmount(item) {
				this.selectedAmount = item.amount
				this.customAmount = ''
			},
			selectCustomAmount() {
				this.selectedAmount = null
			},
			handleRecharge() {
				const amount = this.selectedAmount || this.customAmount
				if (!amount || amount <= 0) {
					uni.showToast({
						title: '请选择或输入充值金额',
						icon: 'none'
					})
					return
				}

				uni.showModal({
					title: '确认充值',
					content: `确认充值 ¥${amount} 吗？`,
					success: (res) => {
						if (res.confirm) {
							// 这里调用充值接口
							this.processRecharge(amount)
						}
					}
				})
			},
			processRecharge(amount) {
				// 模拟充值处理
				uni.showLoading({
					title: '处理中...'
				})

				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '充值成功',
						icon: 'success'
					})
					// 更新余额显示
					const newBalance = parseFloat(this.currentBalance) + parseFloat(amount)
					this.currentBalance = newBalance.toFixed(2)
					// 重置选择
					this.selectedAmount = null
					this.customAmount = ''
				}, 2000)
			},
			goToBalanceDetail() {
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/balance/balance-detail'
				})
			},
			goToBalanceRule() {
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/balance/balance-rule'
				})
			},

			getInfo() {
				if (this.userId) {
					getInfo(this.userId).then(res => {
						this.userInfo = res.data
					})
				}
			},
			getRules() {
				listRules().then(res => {
					this.rules = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 44px 15px 10px;
		// background: linear-gradient(135deg, #FFE4B5, #FFD700);
		background: #FFB610;
		position: relative;

		.nav-back {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-back {
				font-size: 24px;
				color: #333;
				font-weight: bold;
			}
		}

		.nav-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.nav-menu {
			display: flex;
			gap: 10px;

			.iconfont {
				font-size: 20px;
				color: #333;
			}
		}
	}

	.balance-header {
		background: linear-gradient(135deg, #FFE4B5, #FFB610);
		padding: 20px 15px 40px;
		position: relative;

		.balance-bg {
			position: relative;

			.balance-amount {
				font-size: 36px;
				font-weight: bold;
				color: #fff;
				text-align: left;
				margin-bottom: 20px;
			}

			.balance-actions {
				display: flex;
				gap: 20px;

				.action-item {
					.action-text {
						color: #fff;
						font-size: 14px;
					}
				}
			}

			.balance-decoration {
				position: absolute;
				right: 20px;
				top: -20px;
				width: 120px;
				height: 120px;
				opacity: 0.8;
			}
		}
	}

	.recharge-section {
		background: #fff;
		margin: -20px 15px 15px;
		border-radius: 15px;
		padding: 25px 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

		.amount-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			margin-bottom: 25px;

			.amount-item {
				background: #f8f9fa;
				border: 2px solid #f8f9fa;
				border-radius: 10px;
				padding: 20px 10px;
				text-align: center;
				transition: all 0.3s;

				&.active {
					border-color: #FFD700;
					background: #FFF9E6;
				}

				.amount-value {
					font-size: 18px;
					font-weight: bold;
					color: #333;
					margin-bottom: 5px;
				}

				.amount-bonus {
					font-size: 12px;
					color: #ff4444;
				}
			}
		}

		.custom-amount {
			display: flex;
			align-items: center;
			margin-bottom: 25px;

			.custom-label {
				font-size: 16px;
				color: #333;
				margin-right: 10px;
			}

			.custom-input {
				flex: 1;
				height: 45px;
				border: 1px solid #ddd;
				border-radius: 8px;
				padding: 0 15px;
				font-size: 16px;
			}
		}

		.recharge-btn {
			width: 100%;
			height: 42px;
			background: linear-gradient(90deg, #FFD700, #FFA500);
			color: #fff;
			font-size: 18px;
			font-weight: bold;
			border: none;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				opacity: 0.8;
			}
		}
	}

	.recommend-section {
		padding: 0 15px;

		.recommend-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 20px;
		}

		.recommend-list {
			display: flex;
			gap: 15px;

			.recommend-item {
				flex: 1;
				background: #fff;
				border-radius: 10px;
				overflow: hidden;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

				.recommend-image {
					width: 100%;
					height: 200px;
				}

				.recommend-info {
					padding: 15px;

					.recommend-name {
						font-size: 14px;
						color: #333;
						margin-bottom: 8px;
						line-height: 1.4;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.recommend-tags {
						display: flex;
						gap: 5px;
						margin-bottom: 10px;

						.tag {
							font-size: 10px;
							color: #999;
							background: #f0f0f0;
							padding: 2px 6px;
							border-radius: 3px;
						}
					}

					.recommend-price {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.current-price {
							font-size: 16px;
							color: #ff4444;
							font-weight: bold;
						}

						.sold-count {
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>